<!-- 活动列表页 -->
<template>
    <div class='hdlist_warpper'>
        <div style="display: flex;line-height: 30px;width: 250px;margin: 15px auto 0 auto;font-size: 14px;">
            <div style="flex: 1;text-align: center;background: #1699ee;color: #fff;border-top-left-radius: 15px;border-bottom-left-radius: 15px;">街坊活动</div>
            <div style="flex: 1;text-align: center;background: #ececec;border-top-right-radius: 15px;border-bottom-right-radius: 15px;" @click="$router.replace('/talk')">街坊议事</div>
        </div>
        <!-- 头部 -->
        <div class="Lowerhead">
            <div class="search_box">
                <van-search @input="change" v-model="Searchkey" placeholder="请输入搜索关键词" show-action shape="round" @search="onSearch">
                    <div slot="action" @click="onSearch">搜索</div>
                </van-search>
            </div>
            <!-- 选择 -->
            <div class="NavigatBar">
                <area-select @load="upload" />
                <!-- <van-dropdown-menu>
                                <van-dropdown-item v-model="value1" :options="region" @change="bara(value1)" />
                                <van-dropdown-item v-model="value2" :options="types" @change="barb(value2)" />
                                <van-dropdown-item v-model="value3" :options="states" @change="barc(value3)" />
                            </van-dropdown-menu> -->
            </div>
        </div>
        <ul>
            <!-- <van-list v-show="!showMap" class="listCON" v-model="loading" :finished="finished" finished-text="没有更多了" @load="loadData"> -->
            <van-list v-show="!showMap" class="listCON">
                <div>
                    <li style="float:left;" v-for="(v,i) in listData" :key="i" @click="ClickDetails(v)">
                        <div class="tp_box">
                            <img :src="picUrl(v.url)" />
                            <div class="zts">{{v.activityStatus}}</div>
                            <div class="yy">
                                <span>{{v.activityType}}</span>
                                <!-- <span>距1113.25km</span> -->
                                <span></span>
                            </div>
                        </div>
                        <div class="zbt">{{v.title}}</div>
                        <div class="sj">{{v.publishDate}}</div>
                        <span class="nlfb">{{v.regionName}}</span>
                        <div class="dz"><img src="@/assets/activity/dingwei.png" alt="">{{v.adress}}</div>
                        <van-divider />
                        <div class="bmrs"><span>已报名 {{v.signUpNumberAdd}}人</span><span><img src="" alt=""></span><img src="" alt=""></div>
                    </li>
                </div>
            </van-list>
            <ocn-map v-if="showMap" ref="ocnmap" />
        </ul>
        <van-pagination class="pages" v-model="currentPage" :page-count="allcount" force-ellipses @change="GetList" />
        <!-- 跳转 -->
        <div class="switchBtn">
            <span @click="showMap = false" :class="showMap ? '': 'Selectle'">列表</span>
            <span @click="initMap" :class="showMap ? 'Selectle': ''">地图</span>
        </div>
    </div>
</template>

<script>
    import AreaSelect from "@/components/AreaSelect2.vue";
    import OcnMap from './activityModule/activtyList'
    export default {
        name: 'activity',
        components: {
            AreaSelect,
            OcnMap
        },
        data() {
            return {
                showMap: false,
                Searchkey: window.Searchkey || "", //搜索关键字
                value1: "",
                value2: '',
                value3: '',
                region: [{
                    text: '活动区域',
                    value: ''
                }], //活动区域
                types: [{
                    text: '活动类型',
                    value: ''
                }], // 活动类型
                states: [{
                    text: '活动状态',
                    value: ''
                }], // 活动状态
                listData: [], //列表
                pageIndex: 1,
                pageSize: 8,
                totalCount: 0,
                loading: false,
                finished: false,
                dataAreaCode: '',
                activityType: '',
                activityStatus: '',
                r: {},
                isChoose: false, //是否进行了街镇的选择
                currentPage: 1,
                allcount: 1,
            };
        },
        computed: {},
        //方法集合
        methods: {
            initMap() {
                this.showMap = true;
                setTimeout(() => {
                    this.$refs.ocnmap.setMapMarker(this.r);
                }, 300);
            },
            change() {
                window.Searchkey = this.Searchkey;
            },
            upload(s) {
                this.isChoose = true; //进行街镇选择了，isChoose为true
                this.dataAreaCode = s[0];
                this.activityType = s[1];
                this.activityStatus = s[2];
                this.pageIndex = 1
                // this.loadData(this.pageIndex);
                this.GetList(this.pageIndex);
            },
            //获取活动列表
            // 注册了，默认dataAreaCode为当前所在区划。当选择全部街镇，传dataAreaCode为河口区编码（370503）；
            // 没注册，默认dataAreaCode: ''。当选择全部街镇或者选择其他街镇时提示注册。
            GetList() {
                this.$toast.loading({
                    message: '加载中...',
                    forbidClick: true
                });
                if (this.isChoose == true) { //进行街镇选择
                    if (this.slow.isAuth) { //注册过了,当选择全部街镇，传dataAreaCode为河口区编码（370503）,目前是传的空
                    // if (this.slow.isAuth && this.slow.userInfo.subscribe != 0) { //注册过了,当选择全部街镇，传dataAreaCode为河口区编码（370503）,目前是传的空
                        if (this.dataAreaCode == "") {
                            this.dataAreaCode = "370503"
                        }
                        if (this.dataAreaCode == "河口区") {
                            this.dataAreaCode = ""
                        }
                        this.post("community_activity/loadInfo", {
                            // pageIndex: this.pageIndex,
                            pageIndex: this.currentPage,
                            pageSize: this.pageSize,
                            dataAreaCode: this.dataAreaCode,
                            title: this.Searchkey,
                            startTime: '2019-01-01',
                            endTime: '',
                            activityType: this.activityType,
                            activityStatus: this.activityStatus,
                        }).then(r => {
                            this.$toast.clear();
                            // this.listData = r.list
                            // this.totalCount = r.pageInfo.totalCount;
                            this.r = r;
                            this.allcount = Number(r.pageInfo.pageCount);
                            this.listData = r.list;
                            // this.pageIndex += 1;
                        }).catch(err => {});
                    } else { //没有进行注册，只显示河口区层级发布的，选择全部街镇或其他街镇时提示注册
                        this.$dialog
                            .confirm({
                                title: "提示",
                                message: "您还没有认证，是否前去认证？"
                            })
                            .then(() => {
                                this.$router.push("/register");
                            })
                            .catch(() => {
                                // on cancel
                            });
                    }
                } else { //没有选择街镇
                    let codes = ''
                    if (this.slow.isAuth) { //如果注册了，默认当前区划
                    // if(this.slow.isAuth && this.slow.userInfo.subscribe != 0){
                        codes = sessionStorage.getItem("dataAreaCode")
                    } else { //如果没有注册，默认显示河口区层级发布的
                        codes = ''
                    }
                    if (codes == "河口区") {
                        codes = ""
                    }
                    this.post("community_activity/loadInfo", {
                        // pageIndex: this.pageIndex,
                        pageIndex: this.currentPage,
                        pageSize: this.pageSize,
                        dataAreaCode: codes,
                        title: this.Searchkey,
                        startTime: '2019-01-01',
                        endTime: '',
                        activityType: this.activityType,
                        activityStatus: this.activityStatus,
                    }).then(r => {
                        this.$toast.clear();
                        // this.listData = r.list
                        // this.totalCount = r.pageInfo.totalCount;
                        this.r = r;
                        this.allcount = Number(r.pageInfo.pageCount);
                        this.listData = r.list;
                        // this.pageIndex += 1;
                    }).catch(err => {});
                }
            },
            //获取活动区域
            zoneAction() {
                this.post("community_activity/regiontype").then(r => {
                    r.list.forEach(element => {
                        if (this.region) {
                            this.region.push({
                                text: element.regionName,
                                value: element.regionCode
                            })
                        } else {
                            this.region.push({
                                text: '活动区域',
                                value: '0'
                            })
                        }
                    });
                }).catch(err => {});;
            },
            onSearch() {
                this.pageIndex = 1
                // this.loadData(this.pageIndex);
                this.GetList(this.pageIndex);
            },
            // 下拉框选项
            // bara(a) {
            //     this.dataAreaCode = a;
            //     this.pageIndex = 1
            //     this.loadData(this.pageIndex);
            // },
            // barb(b) {
            //     this.activityType = b;
            //     this.pageIndex = 1
            //     this.loadData(this.pageIndex);
            // },
            // barc(c) {
            //     this.activityStatus = c;
            //     this.pageIndex = 1
            //     this.loadData(this.pageIndex);
            // },
            ClickDetails(v) {
                this.$router.push({
                    path: '/activityDetails',
                    query: {
                        DetailData: v
                    }
                });
            },
            clickBtn() {
                this.$router.push({
                    path: '/activtyList',
                });
            },
        },
        created() {
            this.zoneAction();
            /**
             * 获取数据字典值
             */
            this.slow.getDictionaryValus('activityType').then(ret => {
                console.log(ret)
                ret.forEach(m => {
                    this.types.push({
                        text: m.text,
                        value: m.value
                    })
                })
            })
            this.slow.getDictionaryValus('activityStatus').then(ret => {
                console.log(ret)
                ret.forEach(m => {
                    this.states.push({
                        text: m.text,
                        value: m.value
                    })
                })
            })
            this.GetList();
        }
    }
</script>
<style lang="scss">
    @import "~@/smobile.scss";
    .hdlist_warpper {
        transform: none !important;
        transition: none !important;
        perspective: none !important;
        will-change: auto !important;
        width: 100%;
        .Lowerhead {
            position: fixed;
            width: 100%;
            height: auto;
            z-index: 99;
            background: #ffffff;
            .search_box {
                margin-top: 10px;
                .van-search--show-action {
                    padding-right: 5px;
                }
                .van-search {
                    padding: 0px 20px 0 20px;
                    .van-cell {
                        padding: 6px 8px 6px 0;
                    }
                }
                .van-search__action {
                    color: #1e9ff6;
                    font-size: 16px;
                }
            }
            .NavigatBar {
                margin-top: 15px;
                .van-dropdown-menu {
                    box-shadow: 0px 2px 0px #e6eeee
                }
            }
        }
        .listCON {
            padding: 30px 15px;
            background: #f5f8f8;
            overflow: hidden;
            position: absolute;
            bottom: 0px;
            right: 0px;
            left: 0;
            top: 150px;
            margin: auto;
            overflow-y: scroll;
            div {
                width: 100%;
                overflow: hidden;
                li:nth-child(2n+1) {
                    margin-right: 4%;
                }
                li {
                    border-radius: 15px;
                    justify-content: flex-start;
                    align-items: flex-start;
                    width: 48%;
                    background: #ffffff;
                    margin-bottom: 15px;
                    .tp_box {
                        height: 28vw;
                        width: 100%;
                        border-top-left-radius: 15px;
                        border-top-right-radius: 15px;
                        position: relative;
                        img {
                            width: 100%;
                            height: 28vw;
                            border-top-left-radius: 15px;
                            border-top-right-radius: 15px;
                        }
                        .zts {
                            position: absolute;
                            right: 5px;
                            top: 5px;
                            color: #7dcd99;
                            background: #ffffff;
                            border-radius: 20px;
                            font-size: 14px;
                            width: 55px;
                            height: 22px;
                            line-height: 22px;
                            text-align: center;
                            font-size: 12px;
                        }
                        .yy {
                            position: absolute;
                            bottom: 0;
                            left: 0;
                            right: 0;
                            color: #ffffff;
                            background: rgba(0, 0, 0, 0.5); // width: 100%;
                            padding: 5px;
                            font-size: 12px;
                            display: flex;
                            justify-content: space-around;
                        }
                    }
                    .zbt {
                        padding: 10px 15px 5px 15px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                    .sj {
                        color: #979797;
                        font-size: 12px;
                        padding: 5px 0 5px 15px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                    .nlfb {
                        display: inline-block;
                        margin: 1.5vw 2vw;
                        text-align: center;
                        font-size: 12px;
                        background: #e5b03e;
                        padding: 1vw 2vw;
                        border-radius: 4vw;
                        color: #ffffff;
                    }
                    .dz {
                        color: #979797;
                        font-size: 12px;
                        padding: 5px 15px 0px 15px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        img {
                            display: inline-block;
                            margin-right: 5px;
                            width: 4vw;
                        }
                    }
                    .bmrs {
                        padding: 0 15px 12px 15px;
                        color: #9d9d9d;
                        font-size: 14px;
                    }
                    .van-divider {
                        width: 100%;
                    }
                }
            }
        }
        .pages {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 111;
            background: #ffffff;
        }
        .switchBtn {
            position: fixed;
            left: 0;
            bottom: 30%;
            z-index: 88;
            display: flex;
            width: 40vw;
            height: 12vw;
            line-height: 12vw;
            span {
                width: 50%;
                text-align: center;
                color: #ffffff;
                font-size: 14px;
                background: rgba(0, 0, 0, 0.2);
            }
            .Selectle {
                background: #1699ee;
            }
        }
    }
</style>